<template>
  <div class="desc-pic">
    <div class="desc">
      {{list.content}}
    </div>
    <div class="pic_img  clearfix">
      <!--微信浏览器-->
      <div v-if="weixinShow" v-for="(item,index) in list.img" :key="index" class="img_li">
        <div class="img" v-lazy:background-image="item" @click="preview(index)"></div>
      </div>
      <!--普通浏览器-->
      <div v-if="ordinaryShow" class="img-box" v-for="(url, index) in list.img"
           :style="{'background-image': 'url(' + url + ')'}"
           :key="index+'a'">
        <img preview="1" preview-text="" :src="url" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  // import qs from 'qs'
  import wx from 'weixin-js-sdk'
  // import commonUrl from '../../common/js/commonUrl.js'
  import { IsWeiXin } from '../../common/js/isWeiXin'

  export default {
    data () {
      return {
        ready: false,
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        }
      }
    },
    props: ['list'],
    created () {
      // 如果图片是异步生成，在图片数据更新后调用
      this.$previewRefresh()
      // 判断不同浏览器
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
      // 初始化JSConfig
      // const url = `${commonUrl.apihost}index.php/wx/wx_jssdk/getSignPackage`
      // let data = {
      //   url: window.location.href.split('#')[0]
      // }
      // this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
      //   if (res.data.code === 200) {
      //     wx.config({
      //       debug: true,
      //       appId: res.data.data.appId,
      //       nonceStr: res.data.data.nonceStr,
      //       rawString: res.data.data.rawString,
      //       signature: res.data.data.signature,
      //       timestamp: res.data.data.timestamp,
      //       jsApiList: ['previewImage']
      //     })
      //     this.ready = true
      //   }
      // })
    },
    methods: {
      preview (index) {
        // if (this.ready) {
        wx.previewImage({
          current: this.list.img[index], // 当前显示图片的http链接
          urls: this.list.img // 需要预览的图片http链接列表
        })
        // }
      }
    }
  }
</script>

<style lang="scss">

  .desc-pic {
    padding: 10px;
    .desc {
      line-height: 16px;
      color: #292929;
      font-size: 13px;
    }
    .pic_img {
      width: 100%;
      margin-top: 7px;
      /*微信浏览器的图片预览的样式*/
      .img_li {
        width: 24%;
        height: 80px;
        margin-top: 1%;
        float: left;
        margin-left: 1%;
        background: #f2f2f2;
        .img {
          width: 100%;
          height: 100%;
          background-size: cover;
        }
      }
      /*普通浏览器的图片预览的样式*/
      .img-box {
        float: left;
        /*width: 30%;*/
        padding: 11%;
        margin: 0.65%;
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          opacity: 0;
        }
      }
    }
  }
</style>
